<template>
  <div class="detail">
    <el-dialog
      title="工单详情"
      :visible="showDetail"
      width="630px"
      @close="closeFn"
    >
    <!-- header -->
    <!-- 代办 -->
        <template v-if="detailRow.taskStatus === 1">
          <el-row class="task-status" type="flex" justify="space-between" align="middle">
        <el-col :span="1" class="left">
          <img src="" alt="">
        </el-col>
        <el-col class="span" :span="15">
          <span>代办</span>
        </el-col>
        <el-col :span="7">
        <img src="https://likede2-admin.itheima.net/img/pic_1.834b274c.png" alt="">
        </el-col>
        </el-row>
        </template>
        <!-- 进行 -->
        <template v-if="detailRow.taskStatus === 2">
          <el-row class="task-status" type="flex" justify="space-between" align="middle">
        <el-col :span="1" class="left">
          <img src="" alt="">
        </el-col>
        <el-col class="span" :span="15">
          <span>进行</span>
        </el-col>
        <el-col :span="7">
        <img src="https://likede2-admin.itheima.net/img/pic_2.ca18552d.png" alt="">
        </el-col>
        </el-row>
        </template>
        <!-- 取消 -->
        <template v-if="detailRow.taskStatus === 3">
          <el-row class="task-status" type="flex" justify="space-between" align="middle">
        <el-col :span="1" class="left">
          <img src="" alt="">
        </el-col>
        <el-col class="span" :span="15">
          <span>取消</span>
        </el-col>
        <el-col :span="7">
        <img src="https://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt="">
        </el-col>
        </el-row>
        </template>
        <!-- 完成 -->
        <template v-if="detailRow.taskStatus === 4">
          <el-row class="task-status" type="flex" justify="space-between" align="middle">
        <el-col :span="1" class="left">
          <img src="" alt="">
        </el-col>
        <el-col class="span" :span="15">
          <span>完成</span>
        </el-col>
        <el-col :span="7">
        <img src="https://likede2-admin.itheima.net/img/pic_4.3b5af41c.png" alt="">
        </el-col>
        </el-row>
        </template>
        <!-- body -->
        <el-form>
          <el-row type="flex">
            <el-col :span="12">
              设备编号:
              <span>{{detailRow.innerCode}}</span>
            </el-col>
            <el-col :span="12">
              创建日期
              <span>{{detailRow.createTime}}</span>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="12">
              取消日期:
              <span>{{detailRow.updateTime}}</span>
            </el-col>
            <el-col :span="12">
              运营人员
              <span>{{detailRow.userName}}</span>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="12">
              工单类型:
              <span>{{detailRow.taskStatusTypeEntity?.statusId === 1 ? '代办' : detailRow.taskStatusTypeEntity?.statusId === 2 ? '进行' : detailRow.taskStatusTypeEntity?.statusId === 3 ? '取消' : '完成'}}</span>
            </el-col>
            <el-col :span="12">
              补货数量
              <span>补货详情</span>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="12">
              工单方式:
              <span>{{
              detailRow.taskType?.typeId === 1
                ? "投放工单"
                : detailRow.taskType?.typeId === 2
                ? "补货工单"
                : detailRow.taskType?.typeId === 3
                ? "维修工单"
                : "撤机工单"
            }}</span>
            </el-col>
            <el-col :span="12">
              取消原因:
              <span></span>
            </el-col>
          </el-row>
        </el-form>
      <el-row type="flex" justify="center">
        <template v-if="detailRow.taskStatus !== 4">
          <el-button @click="closeFn" size="middle">取消工单</el-button>
        </template>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// import getTaskInfo from '@/api/order'
export default {
  props: {
    showDetail: Boolean,
    detailRow: {
      type: Object,
      required: true
    }
  },
  methods: {
    closeFn () {
      this.$emit('update:showDetail', false)
    }
    // getTaskInfo () {
    //   console.log(this.taskId)
    // const res = await getTaskInfo(this.taskId)
    // console.log(res)
    // }
  }

}
</script>

<style lang="less" scoped>
.el-button{
  background-color: #fbf4f0!important;
}
.task-status{
  overflow: visible;
  height: 54px;
  background-color: #f8f8f8;

}
.left{
  margin-left: 20px;
}
.span{
  margin-left: 15px;
}
/deep/ .el-col{
  padding-left: 20px;
  margin-top: 20px;
}
/deep/ .el-button{
  margin-top: 20px;
}
</style>
